<template>
  <view class="summer-container">
    <!-- 背景图片和标题 -->
    <view class="header-section">
      <image src="/static/bg5.png" mode="aspectFill" class="top-image"></image>
 
    </view>
    
    <!-- 主内容滚动区域 -->
    <scroll-view scroll-y="true" class="content-scroll-view" scroll-with-animation>
      <!-- 第一个白色框 - 视频区域 -->
      <view class="white-box video-box">
        <!-- 框顶背景和图标 -->
        <view class="box-header">
          <image src="/static/bg6.png" mode="aspectFill" class="header-bg"></image>
          <view class="header-content">
            <image src="/static/bg7.png" mode="aspectFit" class="header-icon"></image>
            <text class="header-title">定格成电记忆</text>
          </view>
        </view>
        
        <!-- 视频播放区域 -->
        <view class="video-container">
          <video 
            id="myVideo"
            src="/static/dy.mp4" 
            class="video-player"
            controls
            @error="onVideoError"
            :autoplay="false"
            show-center-play-btn="true"
            show-bottom-progress="true"
            object-fit="contain"
          ></video>
		 

        </view>
      </view>
      
      <!-- 第二个白色框 - 留言板区域 -->
      <view class="white-box message-box">
        <!-- 框顶背景和图标 -->
        <view class="box-header">
          <image src="/static/bg6.png" mode="aspectFill" class="header-bg"></image>
          <view class="header-content">
            <image src="/static/bg8.png" mode="aspectFit" class="header-icon"></image>
            <text class="header-title">毕业留言板</text>
          </view>
        </view>
        
        <!-- 留言板内容 -->
        <view class="message-board-content">
          <textarea 
            class="message-input" 
            placeholder="请输入您对母校的寄语或个人对未来的展望\n支持emoji..." 
            :maxlength="1000" 
            v-model="message"
            
            show-confirm-bar="false"
          ></textarea>
          <text class="char-count">{{ message.length }}/1000</text>
          <button class="submit-button" @tap="submitMessage">提交留言</button>
        </view>
      </view>
      
      <!-- 底部版权信息 -->
      <view class="footer">
        成电芯伙伴提供技术支持-数据仅供参考
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      };
    },
    methods: {
      submitMessage() {
        if (this.message.trim() === '') {
          uni.showToast({
            title: '请输入留言内容',
            icon: 'none'
          });
          return;
        }
        
        // 提交留言的逻辑
        uni.showToast({
          title: '留言提交成功',
          icon: 'success'
        });
        
        // 清空输入框
        this.message = '';
        
        // 提交成功后延时跳转到xaitian2页面
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/xaitian2'
          });
        }, 1500);
      },
      
      // 视频错误处理函数
      onVideoError(e) {
        console.error('视频播放错误:', e);
      }
    }
  };
</script>

<style scoped>
  .summer-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #267541;
  }
  .top-image{
    width:100%;
    height:300px;
  }
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  .content-scroll-view {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    padding: 40rpx 30rpx 30rpx 30rpx;
    box-sizing: border-box;
  }
  
  .white-box {
    background-color: white;
    border-radius: 20rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.15);
  }
  
  .video-box {
    margin-bottom: 40rpx;
  }
  
  .box-header {
    position: relative;
    width: 100%;
    height: 80rpx;
  }
  
  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .header-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 30rpx;
    box-sizing: border-box;
	align-content: center;
  }
  
  .header-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
  }
  
  .header-title {
    color: white;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .video-container {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .video-player {
    width: 100%;
    height: 400rpx;
    background-color: #000;
    border-radius: 10rpx;
  }
  
  .message-board-content {
    padding: 30rpx;
  }
  
  .header-section {
    position: relative;
    width: 100%;
  }
  
  .message-input {
    width: 100%;
    min-height: 200rpx;
	height: 330px;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }
  
  .title-overlay {
    position: absolute;
    bottom: 50rpx;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 60rpx;
    font-weight: bold;
    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
  
  .char-count {
    display: block;
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin: 10rpx 0;
  }
  
  .submit-button {
    width: 295px;
	
    margin-top: 20rpx;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 10rpx;
    padding: 20rpx 0;
    font-size: 32rpx;
	align-self: center;
  }
  
  .footer {
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    padding: 10rpx;
    z-index: 10;
    position: relative;
  }
</style>

